<template>
  <div>
    <el-button
      class="btn"
      type="primary"
      @click="$router.push({ name: 'QuestionQuestionBankKaodian_edit' })"
      >新增考点</el-button
    >
    <!-- 搜索 -->
    <el-form v-model="form">
      <el-form-item class="el-form-item" label="考点名称" label-width="100px">
        <el-input
          v-model="form.input"
          class="inp"
          placeholder="请输入考点名称关键字"
        ></el-input>
      </el-form-item>
      <el-form-item class="el-form-item" label-width="140px">
        <el-button @click="sou">搜索</el-button>
        <el-button @click="chong">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据渲染 -->
    <el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="考点名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="sub_amount" label="下属考点数量">
      </el-table-column>
      <el-table-column prop="question_amount" label="试题数量">
      </el-table-column>
      <el-table-column prop="creator" label="创建人"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click="add(scope.row.id, scope.row.point_rule)"
            >新增-</el-link
          >
          <el-link
            type="primary"
            @click="
              $router.push({
                name: 'QuestionQuestionBankKaodian_edit',
                query: { id: scope.row.id },
              })
            "
            >编辑-</el-link
          >
          <el-link type="primary">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import kaos from "../../api/api";
export default {
  components: {},
  data() {
    return {
      list: [],
      form: {
        input: "",
      },
    };
  },
  mounted() {
    this.kao();
  },
  methods: {
    kao() {
      kaos({
        name: this.form.input,
      }).then((res) => {
        this.list = res.data.data;
      });
    },
    // 搜索
    sou() {
      this.kao();
    },
    // 重置
    chong() {
      this.form.input = "";
      this.kao();
    },
    // 新增
    add(id, pointRule) {
      if(this.list.child){
             const parentName = this.getParentName(pointRule);
      //  跳转路由并传参
      this.$router.push({
        name: "QuestionQuestionBankKaodian_edit",
        query: {
          parent_id: id,
          parentName,
        },
      });
      }else{
             this.$confirm('新增子考点后，当前考点试题将会被转移至子考点，是否确定新增子考点？（考点试题转移至子考点后，支持通过考点试题转移，批量转移该考点的试题到其他末级考点下）', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已确定'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
    },
    // 根据 point_rule 字段查找父分类名称
    getParentName(pointRule) {
      const arr = pointRule.substr(1).split("/");
      // 所有的数据的数组
      let data = this.list;
      let dataA; // 找出来的数据
      let val; // 每次从数组中取出的值
      // 当数组中还有元素时就一直循环
      while (arr.length > 0) {
        // 从数组中取出第1个元素并从数组中删除
        val = arr.shift();
        // 到数据中根据这个ID找出这条记录
        dataA = data.find((item) => item.id == val);
        // 让 data 等于这条记录的 child
        data = dataA.child;
      }
      // 把找到的结果返回
      return dataA.name;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped>
.btn {
  float: left;
  margin-top: 80px;
  margin-bottom: 20px;
}
.el-form-item {
  float: left;
  margin-top: 20px;
  margin-left: -130px;
}
.inp {
  float: left;
  width: 200px;
}
</style>
